{% extends 'base/base.html' %}
{% load static %}
{% block head %}
    <link rel="stylesheet" href="{% static 'css/detail.css' %}">
{% endblock %}
{% block main %}
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
        <el-col :span="16">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a location="/">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item><a data-id="{{ chapter.novel_id }}">{{ chapter.novel }}</a></el-breadcrumb-item>
                <el-breadcrumb-item>{{ chapter.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
        <el-col :span="16">
            <div class="content">
                <div class="text-head">
                    <h3 class="chapterName">{{ chapter.title }}</h3>
                    <div class="text-info cf">
                        <div class="info fl">
                            <el-link :underline="false">{{ chapter.novel_name }}</el-link>
                            <el-link :underline="false">{{ chapter.novel_author }}</el-link>
                            <span class="chapterWordCut">{{ chapter.content|length }}字</span>
                            <span class="updateTime">{{ chapter.update_time }}</span>
                        </div>

                    </div>
                    <article class="article">{{ chapter.content|safe }}</article>
                    <hr>
                    <p class="readtip">温馨提示：按 回车[Enter]键 返回书目录，按 ←键 返回上一章， 按 →键 进入下一章，加入书架方便您下次继续阅读。
{#                        <a href="javascript:;" class="red">章节错误？点此举报</a>#}
                    </p>
                    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

                    <div class="toolbar">
                        <div class="tbox shr bdsharebuttonbox"><i class="fa fa-share-alt fa-lg icon-2x"></i><span class="text">分享</span></div>
                        <a class="tbox afk addMark" href="javascript:;">
                            <i class="fa fa-ticket fa-lg icon-2x"></i><span class="text">追书</span>
                        </a>
                        <a class="tbox spt addProp" href="javascript:;" onclick="">
                            <i class="fa fa-star-o  fa-lg icon-2x"></i><span class="text">点赞</span>
                        </a>
                        {% if chapter.first.uuid %}
                        <a href="javascript:;" class="tbox pre" data-chapter_id="{{ chapter.first.uuid }}" target="_self"><i
                                class="fa fa-arrow-left  fa-lg icon-2x"></i><span class="text">上一页</span></a>
                        {% endif %}
                        <a href="javascript:;" data-id="{{ chapter.novel_id }}" class="tbox clg" target="_self"><i class="fa fa-list-ul  fa-lg icon-2x"></i><span
                                class="text">目录</span></a>
                    {% if chapter.fast.uuid %}
                    <a href="javascript:;" class="tbox next" target="_self" data-chapter_id="{{ chapter.fast.uuid }}"><i class="fa fa-arrow-right  fa-lg icon-2x"></i><span
                                class="text">下一页</span></a>
                    {% endif %}
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
    </el-row>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        var Main = {
            data() {
                return {
                    title: '{{ chapter.title }} {{ chapter.novel }}',
                    keywords: '{{ chapter.novel_key }}',
                    description: '{{ chapter.novel_description }}',
                    navList: [],
                    column_display: [],
                    search: {
                        key: ''
                    },
                };
            },
            methods: {
                handleNavSelect: function (key, keyPath) {
                    handleNavSelect(key, keyPath)
                },
                handSearch: function () {
                    var key = this.search.key;
                    console.log(key)
                }
            }, mounted() {
                result = ajax(this, 'GET', {'parse': 'all'}, '{% url "web_api:navigation" %}');
                if (result.code === 0) {
                    this.navList = result.nav_all;
                    this.column_display = result.column_display;
                }
            }
        }
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app')


        $(document).keydown(function (event) {
            var keyNum = event.which;   //获取键值
            if (keyNum === 13) {
                $('.clg').click()// 回车
            } else if (keyNum === 39) {
                $('.next').click()// 右
            } else if (keyNum === 37) {
                $('.pre').click()//左
            }
        });
    </script>
{% endblock %}